<template>
  <el-card class="systemIndexBox">
    <div class="base-info">
      <div class="list-box-item">
        <span class="label">硬件信息：</span>
        <el-tooltip
          class="item"
          effect="dark"
          :content="info.hardwareInfo"
          placement="top"
        >
          <span class="info">{{ info.hardwareInfo }}</span>
        </el-tooltip>
      </div>
      <div class="list-box-item">
        <span class="label">授权状态：</span>
        <div class="info-item">
          <span class="status danger">{{
            info.expiryTime ? "已授权" : ""
          }}</span>
          <el-button type="primary" @click="authorized">重新授权</el-button>
        </div>
      </div>
      <div class="list-box-item">
        <span class="label">有效期至：</span>
        <span class="info danger">{{ info.expiryTime }}</span>
      </div>
      <div class="list-box-item treeData">
        <span class="label">菜单信息：</span>
        <div class="info-tree-data">
          <common-tree
            ref="treeRef"
            :default-expand-all="false"
            :isShowFilter="false"
            :tree-data="info.menuTemplateTreeSelect"
          ></common-tree>
        </div>
      </div>
    </div>

    <common-upload-dialog
      upload-path="/authorize/licensecheck/importlicense"
      template-name="userTemplate.xls"
      ref="uploadDialog"
      @closeResultDialog="refresh"
      acceptType=".lic"
    />
  </el-card>
</template>

<script>
import { getlicenseinfo } from "@/api/unauthorized";

export default {
  name: "index",
  data() {
    return {
      info: {
        expiryTime: null,
        hardwareInfo: null,
        menuTemplateTreeSelect: []
      }
    };
  },
  methods: {
    getlicenseinfo() {
      getlicenseinfo().then(res => {
        if (res && res.code === 200) {
          this.info = res.data;
          if (!this.info.menuTemplateTreeSelect)
            this.info.menuTemplateTreeSelect = [];
        } else {
          this.info = {
            expiryTime: null,
            hardwareInfo: null,
            menuTemplateTreeSelect: []
          };
        }
      });
    },
    authorized() {
      this.$refs.uploadDialog.show();
    },

    refresh() {
      location.reload();
    }
  },
  created() {
    this.getlicenseinfo();
  }
};
</script>
<style scoped lang="scss">
.systemIndexBox {
  overflow-y: scroll;

  .base-info {
    width: 50%;

    .list-box-item {
      display: flex;
      align-items: center;
      width: 100%;

      .label {
        text-align: right;
        width: 85px;
        font-size: 14px;
        color: #606266;
        line-height: 40px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
      }

      .info {
        width: calc(100% - 85px);
        font-size: 14px;
        color: #606266;
        line-height: 40px;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        overflow-wrap: break-word;
      }

      .info-item {
        width: calc(100% - 85px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        color: #606266;
        line-height: 40px;

        .status {
          width: calc(100% - 80px);
        }
      }

      .danger {
        color: #f56c6c;
      }
    }

    .treeData {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: 100%;

      .info-tree-data {
        max-height: 500px;
        width: calc(100% - 16px);
        margin: 0 16px;
        padding: 12px;
        border: 1px solid #ccc;
        overflow-y: scroll;
        box-sizing: border-box;
      }
    }
  }
}
</style>
